/*
 * Metro UI CSS
 * Copyright 2012 Sergey Pimenov
 * Licensed under the MIT License
 *
 * Tiles.less
 *
 */

@badge-activity-image: url(%3D);
@badge-alert-image: url(%3D%3D);
@badge-attention-image: url();
@badge-available-image: url(%3D);
@badge-away-image: url(%3D);
@badge-busy-image: url(%3D%3D);
@badge-error-image: url(%3D);
@badge-newMessage-image: url(%3D%3D);
@badge-paused-image: url();
@badge-playing-image: url(%3D);
@badge-unavailable-image: url();


@tileSmall:             150px;
@tileLarge:             310px;
@tileMargin:            5px;
@tileDouble:            @tileSmall * 2 + @tileMargin * 2;
@tileTriple:            @tileSmall * 3 + @tileMargin * 4;
@tileQuadro:            @tileSmall * 4 + @tileMargin * 6;


.tile-group {
    margin: 0;
    margin-right: @unit * 4;
    float: left;
    width: auto;
    height: auto;
    min-height: 1px;
    width: 802px;
}

.tile {
    display: block;
    float: left;
    background-color: @grayDark;
    width: @tileSmall;
    height: @tileSmall;
    cursor: pointer;
    box-shadow: inset 0px 0px 1px #FFFFCC;
    text-decoration: none;
    color: @white;
    .no-overflow;
    .pos-rel;
    #font > .normal;
    margin: 0 10px 10px 0;
    overflow: hidden;


    * {
        color: @white;
    }

    .tile-content {
        width: 100%;
        height: 100%;
        padding: 0;
        padding-bottom: 30px;
        vertical-align: top;
        padding: 10px 15px;
        overflow: hidden;
        text-overflow: ellipsis;
        position: relative;

        .tertiary-text;
        color: @white;
        line-height: 16px;

        &:hover {
            color: @white;
        }

        h1,h2,h3,h4,h5,h6,p {
            padding: 0;
            margin: 0;
            line-height: 24px;

            &:hover {
                color: @white;
            }
        }

        p {
            .tertiary-text;
            color: @white;
            line-height: 16px;
            overflow: hidden;
            text-overflow: ellipsis;
            &:hover {
                color: @white;
            }
        }
    }

    &.icon {
        & > .tile-content {
            padding: 0;

            & > img {
                position: absolute;
                width: 64px;
                height: 64px;
                top: 50%;
                left: 50%;
                margin-left: -32px;
                margin-top: -32px;
            }
 
            & > i {
                position: absolute;
                width: 64px;
                height: 64px;
                top: 50%;
                left: 50%;
                margin-left: -32px;
                margin-top: -32px;
                font-size: 64px;
            }
        }
    }

    &.image, &.image-slider {
        & > .tile-content {
            padding: 0;

            & > img {
                width: 100%;
                height : auto;
                min-height: 100%;
                max-width: 100%;
            }
        }
    }

    &.image-set {
        & > .tile-content {
            margin: 0;
            padding: 0;
            width: 25% !important;
            height: 50%;
            float: left;
            border: 1px #1e1e1e solid;

            & > img {
                min-width: 100%;
                width: 100%;
                height : auto;
                min-height: 100%;
            }
        }

        .tile-content:first-child {
            width: 50% !important;
            float: left;
            height: 100%;
        }
    }

    &.double {
        width: @tileDouble;
    }
    &.triple {
        width: @tileTriple;
    }
    &.quadro {
        width: @tileQuadro;
    }
    &.double-vertical {
        height: @tileDouble;
    }
    &.triple-vertical {
        height: @tileTriple;
    }
    &.quadro-vertical {
        height: @tileQuadro;
    }


    .brand, .tile-status {
        .pos-abs;
        bottom: 0;
        left: 0;
        right: 0;
        min-height: 30px;
        background-color: transparent;
        .clearfix;

        & > .badge {
            .bottom-right;
            right: 5px;
            margin-bottom: 0;
            color: @white;
            width: 34px;
            height: 28px;
            text-align: center;
            #font > .small-subheader;
            padding-top: 3px;

            &.activity {
                background: @blue @badge-activity-image 50% no-repeat;
            }
            &.alert {
                background: @blue @badge-alert-image 50% no-repeat;
            }
            &.available {
                background: @blue @badge-available-image 50% no-repeat;
            }
            &.unavailable {
                background: @blue @badge-unavailable-image 50% no-repeat;
            }
            &.away {
                background: @blue @badge-away-image 50% no-repeat;
            }
            &.busy {
                background: @blue @badge-busy-image 50% no-repeat;
            }
            &.newMessage {
                background: @blue @badge-newMessage-image 50% no-repeat;
            }
            &.paused {
                background: @blue @badge-paused-image 50% no-repeat;
            }
            &.playing {
                background: @blue @badge-playing-image 50% no-repeat;
            }
            &.error {
                background: @blue @badge-error-image 50% no-repeat;
            }
            &.attention {
                background: @blue @badge-attention-image 50% no-repeat;
            }
        }

        & > .name {
            .bottom-left;
            margin-bottom: 5px;
            margin-left: 15px;
            #font > .tertiary;

            color: @white;
            &:hover {
                color: @white;
            }

            & > [class*=icon-] {
                font-size: 24px;
            }

        }

        & > .icon {
            margin: 5px 15px;
            width: 32px;
            height: 32px;

            & > [class*=icon-] {
                font-size: 32px;
            }

            & > img {
                width: 100%;
                height: 100%;
            }
        }

        & > img ~ .text {
            .pos-abs;
            left: 60px;
            width: auto;
        }

        & > .text {
            position: relative;
            left: 8px;
            top: 5px;
            right: 50px;
            .tertiary-text;
            color: @white;
            line-height: 14px;
            width: 60%;

            &:hover {
                color: @white;
            }
        }
    }

    &:hover {
        outline: 3px #3a3a3a solid;
    }
}

.tiles {
    &.scale {}
}